@import "./mixin/reset";
@import "./mixin/variables";
@import "./mixin/normalize";
@import "./mixin/gutter";
@import "./mixin/utility";
@import "./mixin/font";

@import "mixin/mixin";



body{
  color: $text-main;
  background-color: $bg-body;
  padding-bottom: 50px;
  overflow-y: auto;
  @include transition(background-color 0.5s);
}

#app{
  margin: 0 auto;
  max-width: $separate-width;
  display: flex;
  align-items: flex-start;
  padding: 10px;
}

.type-pad-container{
  width: 100%;
}
.type-pad{
  .tool-bar{
    display: none;
    justify-content: flex-end;
  }
  .standalone-speed-info{
    display: none;
  }
}


.untyped-part{
  position: relative;
}

.template-container{
  color: $text-main;
  padding: 10px 15px;
  border: 1px solid $color-border;
  //border-bottom: none;
  min-height: 150px;
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: $gap-block;
  background-color: transparentize(white, 0.3);
  @include border-radius($radius-main);
  &.big{
    max-height: 200px;
  }
  @media (max-width: $separate-mobile){
    margin-bottom: 5px;
    height: auto;
    overflow-y: scroll;
  }
}

.typing-container{
  position: relative;
  textarea{
    padding: 10px 15px;
    overflow: hidden;
    @include border-radius($radius-main);
    -webkit-appearance: none;
    white-space: pre-wrap;
    border: 1px solid $color-border;
    resize: none;
    min-height: 150px;
    max-height: 200px;
    width: 100%;
    display: block;
    &.big{
      max-height: 200px;
    }
    &:focus{
      border-color: $color-border-clearly;
      @include box-shadow(inset 0 0 10px transparentize(black, 0.88));
    }
  }
}

.text{
  word-break: break-word;
  font-size: $fz-typing;
  white-space: pre-wrap;
  letter-spacing: 1px;
  &.english {
    line-height: 1.3;
    font-size: $fz-typing-english;
    font-family: '';
    letter-spacing: 0;
  }
  .correct{
    text-shadow: none;
    color: transparentize(black, 0.9)  !important;
    white-space: inherit;
  }
  /* Big Character mode*/
  &.big{
    font-size: 4rem !important;
  }
  .wrong{
    background-color: $red;
    color: white !important;
    white-space: inherit;
  }
  @media (max-width: $separate-mobile){
    font-size: $fz-typing-mobile;
  }
}



.link{
  cursor: pointer;
  color: inherit;
  &:hover{
    color: $color-main;
    text-decoration: none;
  }
  &.danger{
    color: $red;
  }
}

.hidden{
  display: none;
}
.hidden-sm {
  @media (max-width: 768px) {
    display: none;
  }
}

.hidden-big {
  @media (min-width: 768px) {
    display: none;
  }
}

$colors  : (
  'green'      : $green,
  'dark-green' : $dark-green,
  'cyan'       : $cyan,
  'blue'       : $blue,
  'purple'     : $purple,
  'roseo'      : $roseo,
  'red'        : $red,
  'orange'     : $orange,
  'yellow'     : $yellow,
  'gray'       : $gray,
  'black'      : $black,
);

@each $name, $color in $colors {
  .text-#{$name}{
    color: $color !important;
  }
}



.full-screen{
  cursor: pointer;
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: $z-modal;
  &-btn {
    opacity: 0.3;
    width: 20px;
    @include transition(all 0.3s);
    img {
      display: block;
      width: 100%;
    }
    &:hover{
      opacity: 1;
      @include transition(all 0.3s)
    }
  }
  &-tip{
    font-size: $fz-info;
    color: $text-comment;
  }
  &-tip-mobile{
    left: 20px;
    bottom: 20px;
    font-size: $fz-info;
    color: $text-comment;
  }

  @media (max-width: $separate-mobile){
    display: none;
  }
}

@import "./mixin/standalone";

